<template>
	<view class="user-certification-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="实名认证"></CustomNav>
		<view class="tips-block block" :style="'margin-top:'+mt">
			<view class="iconfont icon-tishi"></view>请保证信息内容的真实性和完整性
		</view>
		<view class="form-block block">
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>真实姓名</view>
				<input class="form-ctrl" :disabled="form.autherized==1" v-model="form.name" maxlength="5" placeholder="请输入您的真实姓名" placeholder-class="input-placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>身份证号</view>
				<input class="form-ctrl" :disabled="form.autherized==1" v-model="form.id_card" maxlength="18" type="idcard" placeholder="请输入您的身份证号" placeholder-class="input-placeholder"/>
			</view>
		</view>
		<view class="btn normal" v-if="form.autherized!=1" @click="certificate">开始认证</view>
	</view>
</template>

<script>
	import {validate,validateIdCard} from '@/util/validate.js';
	import {saveUser} from '@/api/user.js';
	import {
		filterRealName,
		filterIdCard
	} from '@/util/filter.js';
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form:{
					name:'',
					id_card:'',
					autherized:2,
				},
				rule:{
					name:{
						name:'姓名',
						required:true
					},
					id_card:{
						name:'身份证号',
						required:true
					}
				},
			}
		},
		methods:{
			certificate(){
				if(validate(this.form,this.rule)){
					const check=validateIdCard(this.form.id_card);
					if(!check.result){
						this.showToast(check.msg)
						return;
					}
					this.updateCertificate()
					/*wx.startFacialRecognitionVerify({
						name:this.form.name,
						idCardNumber:this.form.id_card,
						success:(e)=>{
							if(e.errCode==0){
								this.updateCertificate()
							}else{
								this.showToast('认证失败')
							}
						},
						fail:(e)=>{
							this.showToast('认证失败')
						}
					})*/
				}
			},
			updateCertificate(){
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				saveUser({id_card:this.form.id_card,name:this.form.name}).then(()=>{
					this.$store.dispatch('user/getUser')
					this.showToast('认证成功')
					this.back();
				})
			},
			
			getFilterIdcard(){
				
			}
		},
		async onLoad() {
			const user=this.$store.getters.user;
			this.form.autherized=user.autherized;
			
			this.form.id_card = user.autherized==1 ? filterIdCard(user.id_card) : '';
			//this.form.id_card=user.autherized==1?'******************':'';
			this.form.name=filterRealName(user.name);
		}
	}
</script>

<style lang="scss" scoped>
	.user-certification-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}
		
		.tips-block{
			margin: 0 auto;
			height: 120rpx;
			border-radius: 14px;
			background:#fff0d6;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #e59f19;
			font-size: 30rpx;
			.iconfont{
				margin-right: 10rpx;
				font-size: 44rpx;
			}
		}
		.form-block{
			margin: 30rpx auto;
			padding: 0 30rpx;
			background: #fff;
			border-radius: 14px;
			.form-item{
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;
				.form-label{
					width: 180rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.form-ctrl{
					width: calc(100% - 250rpx);
				}
				.iconfont{
					width: 40rpx;
					display: flex;
					justify-content: center;
					color: #999;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.form-item:last-child{
				border:none;
			}
		}
		.btn{
			margin: 30rpx auto;
		}
	}
</style>